{% extends "base.html" %}
{% block title %}
    添加商品
{% endblock %}
{% block main %}
    <div class="col-10 offset-1">
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">商品信息</h3>
            </div>
            <form method="post" id="goodForm" class="form-horizontal">
                {% csrf_token %}
                <div class="card-body">
                    <div class="form-group">
                        <label>商品编号</label>
                        <input type="text" name="Gid" class="form-control" placeholder="商品编号 (例如：sp00000001)">
                    </div>
                    <div class="form-group">
                        <label>商品名称</label>
                        <input type="text" name="GName" class="form-control" placeholder="商品名称">
                    </div>
                    <div class="form-group">
                        <label>商品单价</label>
                        <input type="text" name="GPay" class="form-control" placeholder="商品单价">
                    </div>
                    <div class="form-group">
                        <label>客户编号</label>
                        <input type="text" name="Cid" class="form-control" placeholder="客户编号 (例如：gys1001)">
                    </div>
                    <div class="form-group">
                        <label>商品简介</label>
                        <input type="text" name="GIntroduction" class="form-control" placeholder="商品简介">
                    </div>
                    <div class="form-group">
                        <label>备注</label>
                        <input type="text" name="other" class="form-control" placeholder="备注">
                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-8 offset-2">
                            <button type="submit" class="btn btn-primary btn-block">提交信息</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        $(document).ready(function () {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            });

            $.validator.setDefaults({
                submitHandler: function () {
                    $.ajax({
                        async: true,
                        cache: false,
                        url: "/good_add",
                        data: $("#goodForm").serialize(),
                        type: "post",
                        dataType: "json",
                        success: function (res) {
                            if (res.code == 200) {
                                Toast.fire({
                                    icon: 'success',
                                    title: res.message
                                });
                                setTimeout(function () {
                                    window.location.href = '/good_list';
                                }, 1500);
                            } else {
                                Toast.fire({
                                    icon: 'error',
                                    title: res.message
                                });
                            }
                        }
                    });
                }
            });

            $('#goodForm').validate({
                rules: {
                    Gid: {
                        required: true,
                        pattern: /^sp\d{8}$/,
                    },
                    GName: {
                        required: true,
                        maxlength: 30
                    },
                    GPay: {
                        required: true,
                        number: true,
                        min: 0
                    },
                    Cid: {
                        required: true,
                        pattern: /^gys\d{4}$/,
                    },
                    GIntroduction: {
                        maxlength: 40
                    },
                    other: {
                        maxlength: 20
                    }
                },
                messages: {
                    Gid: {
                        required: '请输入商品编号',
                        pattern: '商品编号格式不正确，应以sp开头加8位数字'
                    },
                    GName: {
                        required: '请输入商品名称',
                        maxlength: '商品名称应在30个字符以内'
                    },
                    GPay: {
                        required: '请输入商品单价',
                        number: '商品单价必须为数字',
                        min: '商品单价必须大于等于0'
                    },
                    Cid: {
                        required: '请输入客户编号',
                        pattern: '客户编号格式不正确，应以gys开头加4位数字'
                    },
                    GIntroduction: {
                        maxlength: '商品简介应在40个字符以内'
                    },
                    other: {
                        maxlength: '备注应在20个字符以内'
                    }
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                }
            });
        });

    </script>
{% endblock %}
